<template>
  <div class="header-container">
    <!-- 登陆盒子 -->
    <el-dialog
      v-model="showLogin"
      @close="close"
      width="20%"
      :modal="false"
      destroy-on-close
      :close-on-click-modal="false"
      class="dialog-login">
      <div class="login-box">
        <img
          src="../assets/image/netease-music.png"
          class="logo" />
        <span class="title">登陆网易云账号</span>
        <div class="qr-image">
          <img ref="qrcode" />
        </div>
        <span class="detail">打开网易云音乐APP扫码登录</span>
      </div>
    </el-dialog>
    <!-- 左边设置 -->
    <div class="left">
      <span
        class="iconfont"
        @click="router.back()"
        >&#xe660;</span
      >
      <span
        class="iconfont narrow-right"
        @click="router.forward()"
        >&#xe65f;
      </span>
      <div class="search-area">
        <!-- 搜索提示框 -->
        <el-popover
          :popper-style="{
            backgroundColor: bg,
          }"
          popper-class="search-tip"
          placement="bottom-start"
          :width="460"
          :visible="showHistory">
          <div class="search-tip-content">
            <div class="content-left">
              <h4 class="title">热门搜索</h4>
              <el-divider class="divider-h" />
              <ul class="keywords">
                <li
                  v-for="item in hotSearch.slice(0, 8)"
                  :key="item.searchWord"
                  @click="goSearchByRe(item.searchWord)">
                  <span> {{ item.searchWord }} </span
                  ><span class="score">{{ item.score }}次</span>
                </li>
              </ul>
            </div>
            <el-divider
              direction="vertical"
              style="height: 300px; margin: 0" />
            <div class="content-right">
              <h2 class="title">
                搜索历史
                <span
                  @mousedown.prevent="userSearch.splice(0)"
                  class="clear"
                  >清空</span
                >
              </h2>
              <el-divider class="divider-h" />
              <ul class="keywords">
                <li
                  v-for="item in userSearch"
                  :key="item"
                  @click="goSearchByRe(item)">
                  <span> {{ item }} </span>
                </li>
              </ul>
            </div>
          </div>
          <template #reference>
            <div>
              <input
                v-model="search"
                @keyup.enter="goSearch"
                @focusin="showHistory = true"
                @focusout="showHistory = false"
                type="text"
                class="search"
                placeholder="请输入你想要搜索的歌曲，歌手" />
              <span
                class="iconfont"
                @click="goSearch"
                v-prevent
                >&#xeafe;</span
              >
            </div>
          </template>
        </el-popover>
      </div>
    </div>
    <!-- 右边头像 -->
    <div class="right">
      <div class="login">
        <el-avatar
          :size="30"
          :src="user.avatar"
          fit="cover" />
        <span
          v-prevent
          @click="showLoginBox"
          style="font-size: 12px"
          >{{ user.userName }}</span
        >
        <span
          @mousedown.prevent="theme.changeDark"
          v-show="fontColor == '#101010'"
          class="iconfont theme"
          style="font-size: 20px"
          v-text="'&#xe635;'" />
        <span
          @mousedown.prevent="theme.changeLight"
          v-show="fontColor != '#101010'"
          class="iconfont theme"
          style="font-size: 12px"
          v-text="'&#xe764;'" />
      </div>

      <!-- 退出登陆，设置 -->
      <el-dropdown
        trigger="click"
        @command="handleClick"
        class="choice">
        <span
          class="iconfont"
          v-prevent
          >&#xe502;
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item
              command="logout"
              style="font-size: 12px"
              >退出登录<span
                class="iconfont"
                style="margin-left: 5px"
                >&#xe97f;</span
              ></el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, watch, watchEffect, inject } from 'vue';
import { elMessage, setStorAge, getStorage } from '../utils/util';
import { elMessageType, storageType } from '../model/enum';
import { createKey, createQrCode, checkStatus, getHotSearch } from '../api/api';
import { HotSearch } from '../model';
import { useRouter } from 'vue-router';
import useHeaderStore from '../store/header';
import useThemeStore from '../store/theme';
import { storeToRefs } from 'pinia';

//主题保存
const theme = useThemeStore();
const {
  fontColor,
  background,
  menuColor,
  fontBlack,
  tableHover,
  shadow,
  searchBg,
  active,
} = storeToRefs(theme);
const color = fontColor;
const bg = background;
const boxShadow = shadow;
const searchColor = searchBg;
//设置隐藏滚动条
const hideScroll = inject('hideScroll') as Function;

//路由器
const router = useRouter();
const header = useHeaderStore();
const { showLogin, cookie, user } = storeToRefs(header);

//用户搜素的内容
const search = ref<string>('');
//热门搜索列表
const hotSearch = reactive<HotSearch[]>(
  getStorage(storageType.SESSION, 'hotSearch') || []
);
//用户的搜索列表
const userSearch = reactive<string[]>(
  getStorage(storageType.LOCAL, 'userSearch') || []
);
//是否展示搜索推荐列表
const showHistory = ref<boolean>(false);
//获取热门搜索列表内容
//缓存列表结果
if (hotSearch.length == 0) {
  getHotSearch().then((response: any) => {
    if (response) {
      const { data } = response;
      data.forEach((item: any) => {
        hotSearch.push({
          searchWord: item.searchWord,
          score: item.score,
        });
      });
      setStorAge(storageType.SESSION, 'hotSearch', hotSearch);
    }
  });
}

//以下为登陆的内容与退出登陆的内容
//存放二维码照片的容器
const qrcode = ref<HTMLImageElement>();
//计时器的标志
let timeid: number = 0;
//创建产生二维码
const createKeyCode = (): void => {
  createKey()
    .then((response: any) => {
      const {
        data: { unikey },
      } = response;
      creatQrImage(unikey);
      CheckLoginStatus(unikey);
    })
    .catch((err: any) => {
      elMessage(elMessageType.ERROR, err.message);
    });
};
//产生二维码的base64并挂载到容器上
const creatQrImage = (key: string): void => {
  createQrCode(key)
    .then((response: any) => {
      const {
        data: { qrimg },
      } = response;
      qrcode.value!.src = qrimg;
    })
    .catch((err: any) => {
      elMessage(elMessageType.ERROR, err.message);
    });
};
//监测登陆状态
const CheckLoginStatus = (key: string): void => {
  timeid = setInterval(async () => {
    const response: any = await checkStatus(key).catch((err: any) => {
      elMessage(elMessageType.ERROR, err.message);
    });
    const { code, message } = response;
    //根据code状态判断登陆状态
    if (code == '800') {
      //提醒用户二维码已过期
      elMessage(elMessageType.INFO, message);
      //清除timeid
      clearInterval(timeid);
      //重新刷新二维码
      createKeyCode();
    } else if (code == '803') {
      //关闭登陆盒子
      showLogin.value = false;
      //本地存储cookie
      cookie.value = response.cookie;
      setStorAge(storageType.SESSION, 'cookie', response.cookie);
      // 获取用户信息
      header.getInfo();
      //提醒用户登陆成功
      elMessage(elMessageType.SUCCESS, message);
      // 清除计时器
      clearInterval(timeid);
    }
  }, 6000);
};
//打开登陆盒子
const showLoginBox = () => {
  if (!cookie.value) {
    showLogin.value = true;
  } else {
    elMessage(elMessageType.SUCCESS, '已成功登陆，切勿重复点击！');
  }
};
//关闭登陆盒子的回调
const close = () => {
  clearInterval(timeid);
};
//退出登陆,深色模式，浅色模式的切换
const handleClick = (command: string) => {
  if (command == 'logout' && cookie.value) {
    header.logout();
  }
};

//以下为搜索的内容
const goSearch = () => {
  if (!userSearch.includes(search.value)) {
    userSearch.push(search.value);
  }
  hideScroll();
  router.push({
    name: 'search',
    query: {
      keyWord: search.value,
    },
  });
  search.value = '';
};
//点击推荐列表搜索
const goSearchByRe = (keyWord: string) => {
  if (!userSearch.includes(keyWord)) {
    userSearch.push(keyWord);
  }
  hideScroll();
  router.push({
    name: 'search',
    query: {
      keyWord,
    },
  });
};

//检测是否展示登陆二维码
watch(showLogin, (newVal) => {
  if (newVal) {
    //生成二维码
    createKeyCode();
  }
});

//监测userSearch的变化,缓存结果
watch(userSearch, (newVal) => {
  setStorAge(storageType.LOCAL, 'userSearch', newVal);
});

//持久化主题信息
watchEffect(() => {
  setStorAge(storageType.LOCAL, 'theme', {
    fontBlack: fontBlack.value,
    fontColor: fontColor.value,
    backgound: background.value,
    menuColor: menuColor.value,
    tableHover: tableHover.value,
    shadow: shadow.value,
    searchBg: searchBg.value,
    active: active.value,
  });
});
</script>

<style lang="less" scoped>
@font-color: v-bind(color);
@background: v-bind(bg);
@shadow: v-bind(boxShadow);
@search-bg: v-bind(searchColor);
@font-color-gray: #7b7b7b;
@font-color-green: #1ed2a9;

.search-tip-content {
  display: flex;
  .content-left,
  .content-right {
    width: 230px;
    height: 300px;

    .divider-h {
      margin: 10px 0;
    }
    .title {
      margin: 10px 0 0 15px;
      font-size: 14px;
      letter-spacing: 1px;
      font-weight: 520;
      color: @font-color;
      line-height: 14px;
      .clear {
        font-size: 12px;
        margin-left: 100px;
        cursor: pointer;
        color: @font-color-gray;
        &:hover {
          color: @font-color-green;
        }
      }
    }
    .keywords {
      height: 254px;

      span {
        font-size: 13px;
        height: 13px;
        line-height: 13px;
        color: @font-color;
        letter-spacing: 1px;
      }
      li {
        padding: 9px 10px;
        position: relative;
        display: flex;
        align-items: center;
        margin-left: 5px;
        &:hover {
          background-color: rgba(225, 225, 225, 0.6);
        }
        .score {
          font-size: 13px;
          position: absolute;
          right: 5px;
          letter-spacing: 0;
        }
      }

      scroll-behavior: smooth;
      overflow: auto;
      &::-webkit-scrollbar {
        display: none;
      }
    }
  }
}
.header-container {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 10;
  height: 10vh;

  .left {
    display: flex;
    align-items: center;
    margin-left: 3.5vw;
    .iconfont {
      display: block;
      color: @font-color-gray;
      font-size: 16px;
      cursor: pointer;
    }
    .narrow-right {
      margin: 0 20px;
    }
    .search-area {
      width: 300px;
      position: relative;
      span {
        position: absolute;
        right: 12px;
        top: 2px;
        font-size: 20px;
        color: @font-color-gray;
        display: block;
      }

      .search {
        width: 300px;
        height: 34px;
        border-radius: 17px;
        border: none;
        outline: none;
        font-size: 13px;
        padding-left: 20px;
        background-color: @search-bg;
        color: @font-color;
        border: 1px solid #ffffff;
      }
    }
  }
  .right {
    position: absolute;
    right: 4vw;
    display: flex;
    align-items: center;
    .login {
      display: flex;
      cursor: pointer;
      align-items: center;
      span {
        margin-left: 10px;
        font-size: 13px;
        color: @font-color-gray;
      }
      .theme {
        margin-left: 5px;
        display: inline-block;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
      }
    }
    .iconfont {
      color: @font-color-gray;
      margin-left: 5px;
      font-size: 14px;
      cursor: pointer;
    }
    .logout {
      margin-left: 5px;
      font-size: 10px;
    }
    .choice {
      .el-dropdown-menu__item {
        font-size: 12px;
        color: @font-color !important;
        background: @background !important;
      }
    }
  }

  .login-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: @background;

    .title {
      font-size: 20px;
      font-weight: 550;
      color: @font-color;
      margin: 10px 0;
    }
    .logo {
      width: 40px;
    }
    .detail {
      margin-top: 5px;
      font-size: 14px;
      color: @font-color;
    }
    .qr-image {
      margin-bottom: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>

<style lang="less">
@background: v-bind(bg);
@shadow: v-bind(boxShadow);
.dialog-login {
  background-color: @background !important;
  box-shadow: @shadow !important;
  border-radius: 15px !important;
}
</style>
